<template>
  <div>
    <div class="search"><input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" /></div>
    <div class="search-content" ref="search" v-show='keyword'>
      <ul>
        <li @click="handleCityClick(item.name)" class="search-item border-bottom" v-for="item of list">{{ item.name }}</li>
        <li v-show="hasNoData" class="search-item border-bottom">没有找到匹配的数据</li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
export default{
   name:'CitySearch',
   props:{
     cities:Object
   },
   data(){
     return{
       keyword:'',
       list:[],
       timer:null
     }
   },
   mounted() {
       this.scroll = new BScroll(this.$refs.search)
   },
   computed:{
     hasNoData(){
       return !this.list.length
     }
   },
   watch:{
     keyword(){
       if(this.timer){
         clearTimeout(this.timer)
       }
       if(!this.keyword){
         this.list=[]
         return
       }
       this.timer = setTimeout(() => {
         const result = []
         for (let i in this.cities){
           this.cities[i].forEach((value) => {
             if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)> -1){
               result.push(value)
             }
           })
         }
         this.list = result
       },100)
     }
   },
   methods:{
     handleCityClick(city){
        this.$store.dispatch('changeCity',city)
        this.$router.push('/')
     }
   }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'

.search
  padding 0 5px
  height 36px
  background $bgColor
  .search-input
    box-sizing border-box
    width 100%
    height 31px
    padding 0 5px
    line-height 31px
    text-align center
    border-radius 3px
    color #666
.search-content
  z-index 1
  overflow hidden
  position absolute
  top 79px
  left 0
  right 0
  bottom 0
  background #eee
  .search-item
    line-height 31px
    padding-left 10px
    background-color #fff
    color #666
</style>
